<template>
	<view class="person-container">
		<navBar :title='title'></navBar>
		<view class="person-info">
			<view class="info-main">
				<view class="main-item"
				 v-for="(item, index) in form.formLabel"
				 :key="index">
					<view class="item-label">{{ item.label }}</view>
					<view class="item-type">
						<picker style="width: 100%;height: 40rpx;" v-if="item.type === 'picker'" :value="item.selectIndex" mode="selector" range-key="name" :range="item.range" @change="bindPickerChange">
							<view>{{  item.range && item.range[item.selectIndex] ? item.range[item.selectIndex].name : '请选择'}}</view>
						</picker>	
						<picker style="width: 100%;height: 40rpx;" v-if="item.type === 'pickers'" :value="item.selectIndex"  mode="selector" range-key="name" :range="item.range" @change="bindPickerChanget">
							<view>{{item.range && item.range[item.selectIndex] ? item.range[item.selectIndex].name : '请选择'}}</view>
						</picker>		
						<view class="type-time"  v-if="item.type ==='time'">
							<uni-datetime-picker :clear-icon='false' @change="changeTime" v-model="daterange" type="daterange" rangeSeparator="至" />
						</view>
						<uni-easyinput v-model="form.formData[item.prop]" :type='item.types' :clearable="false" v-if="item.type === 'input'" :placeholder=" '请输入' + item.label"></uni-easyinput>
						<uni-easyinput maxlength="600" v-model="form.formData[item.prop]" :type='item.types' :clearable="false" v-if="item.types === 'textarea'" :placeholder=" '请输入' + item.label"></uni-easyinput>
						<image v-if="item.types !== 'textarea'" src="@/static/img/common/arrr.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn" v-if="form.formData.type">
			<view class="btnss" @click="save(1)">删除</view>
			<button class="btns" @click="save(2)">保存</button>
		</view>
		<view class="btn" v-else>
			<button class="btns" @click="save(3)">保存</button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'	
import { onLoad } from '@dcloudio/uni-app'
import navBar from '@/components/navBar.vue';
import api from '@/utils/api/recruit.js'
import { showModal, showToast } from '@/utils/toast.js'
const title = ref('工作经历')
onLoad(res=> {
	if(res.data){
		let obj = JSON.parse(res.data)
		if(obj){
			daterange.value = [obj.inTimeStart, obj.inTimeEnd]
			form.formData = obj
		}
	}
})
const form = reactive({
	formLabel: [
		// { label: '头像', prop: '', type: 'upload' },
		{ label: '职位名称', prop: 'positionName', type: 'input', types: 'text' },
		{ label: '公司名称', prop: 'companyName', type: 'input', types: 'text' },
		// { label: '所属行业', prop: '', type: 'input', types: 'text' },
		{ label: '在职时间', prop: '', type: 'time', types: 'number' },
		{ label: '工作内容', prop: 'workDesc', type: 'textarea', types: 'textarea' },
		// { label: '当时月薪(选填)', prop: '', type: 'input', types: 'number' },
	],
	formData: {}
})
const visible = ref(true)
const daterange = ref(null)
const changeTime = _ =>{
	form.formData.inTimeStart = daterange.value[0]
	form.formData.inTimeEnd = daterange.value[1]
	console.log(form.formData);
}
// 保存
const save = index => {
	if(index === 1) {
		del()
	} else if(index === 2) {
		addEdit(index)
	} else {
		addEdit(index)
	}

}
// 删除
const del =  _ => {
	showModal('是否删除该工作经历').then(async res => {
		if(res.confirm){
			const res = await api.dleExperience( { id: form.formData.id })
			showToast(res.msg)
			uni.$emit('refsh')
			uni.navigateBack()
		}
	})
	
}
// 新增编辑
const addEdit = async index => {
	if(!form.formData.positionName){
		return showToast('请输入职位名称')
	}
	if(!form.formData.companyName){
		return showToast('请输入公司名称')
	}
	if(!form.formData.inTimeStart){
		return showToast('请选择在职时间')
	}
	if(!form.formData.workDesc){
		return showToast('请输入工作内容')
	}
	
	// let data = {
	// 	saveType: 'WORK_EXPERIENCE',
	// 	appUserWorkExperience: form.formData
	// }
	const res = index === 2 ? await api.upExperience(form.formData) : await api.addExperience(form.formData)
	if(res.code === 200) {
		showToast(res.msg)
		uni.$emit('refsh')
		uni.navigateBack()
	}
}
</script>

<style lang="scss" scoped>
::v-deep .is-input-border{
	border: none !important;
}	
::v-deep .uni-easyinput__content-input{
	padding-left: 0 !important;
}
::v-deep .uni-date-x--border{
	border: none !important;
}
::v-deep .uni-icons{
	display: none !important;
}
.person-container{
	height: 100vh;
	background: #fff;
	.person-info{
		padding: 32rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		.info-main{
			width: 100%;
			.main-item{
				display: flex;
				// align-items: center;
				flex-direction: column;
				// justify-content: space-between;
					.item-label{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 32rpx;
						color: #262626;
						line-height: 48rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin: 16rpx 0;

				}

				.item-type{
					display: flex;
					align-items: center;
					// height: 70rpx;
					padding: 32rpx 0;
					box-sizing: border-box;
					border-bottom: 1rpx solid #E5E5E5;
					.type-time{
						flex: 1;
						// height: 40rpx;
					}
					image{
						width: 38rpx;
						height: 38rpx;
					}
				}

			}
			.main-item:last-child{
				.item-type{
					border-bottom: none;
				}
			}
		}
	}
	.btn{
		position: fixed;
		bottom: 0;
		left: 0;
		height: 180rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: #fff;
		width: 100%;
		display: flex;
		.btns{
			// width: 640rpx;
			width: 75%;
			height: 88rpx;
			background: #6B64D3;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			color: #fff;
		}
		.btnss{
			width: 152rpx;
			// height: 48rpx;
			// width: 15%;
			height: 88rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 32rpx;
			color: #6B64D3;
			// line-height: 48rpx;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			text-align: center;
			font-style: normal;
			background: #E4E2FC;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			text-transform: none;
		}
	}
}
</style>
